<style>
  .title {
    color: #ea723d;
  }
  .loadprogress {
        position: fixed;
        z-index: 999999;
        left: 0;
        bottom: 0;
        height: 20px;
        width: 500px;
        font-size: 12px;
        text-indent: 3px;
        line-height: 20px;
    }

    .flexbox {
        display: flex;
        justify-content: space-between;
    }

    .fileName {
        margin: 0 10px;
    }

    .fileList {
        display: flex;
        flex-wrap: wrap;
    }

    .tb-content-plus li {
        min-height: 40px;
        display: flex;
        padding: 10px;
    }

    .rentClass {
        flex-direction: column;
        align-items: flex-start;
    }

    .rentClass>div {
        display: flex;
        flex-direction: column;
    }

    .rentClass>div div {
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 14px;
    }

    .rentClass>div span {
        margin-bottom: 10px;
    }

    .invalidCalss {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: red;
    }

    .table-gray-title {
        line-height: 30px;
        padding: 0 15px;
        background: rgba(240, 240, 240, 1);
        border-radius: 2px;
        display: inline-block;
        margin-bottom: 10px;
    }
    .textCss{
        display: inline-block;
        margin-bottom: 10px;
        color: #666;
        width: 100px;
        height: 35px;
        text-align: center;
        line-height: 30px;
        background: rgba(236, 129, 81, .3);
        padding: 4px 8px;
        border-radius: 2px;
    }
</style>
<main id="conflict">
  <!-- 冲突账单确认 -->
  <div class="rent-resource" v-if="allFlag">
    <h3 class="he-title mb-10">冲突账单确认</h3>
    <div v-if="allFlag">
        <div style="color:#ec4151">此次变更（{{getContractIndex.effective_date}}）影响了以下账单</div>
        <div class="mb-10">注：{{getContractIndex.effective_date}}之后的尚未收款的账单直接作废，不显示在下表</div>
        <div></div>
        <div class="unit-table">
            <div class="tb-title dy-flex border-b gradient-color">
                <div class="dy-fx-1">账单编号</div>
                <div class="dy-fx-3">变更前</div>
                <div class="dy-fx-3">变更后</div>
            </div>
            <div class="tb-content-plus">
                <ul class="dy-flex border-b" v-for="item in conflictBills">
                    <li class="dy-fx-1 border-r" style="align-items: center;justify-content: center;" v-if="item.expenses.length>0">
                        {{item.billNo}}
                    </li>
                    <li class="dy-fx-3 border-r rentClass" v-if="item.expenses.length>0">
                        <section v-for="(single,one) in item.expenses" v-if="single.amount">
                            <div v-if="!one">
                                <div>
                                    <p class="table-gray-title">账单周期</p>
                                </div>
                                <span>{{item.beginDate | formatDate}}至{{item.endDate | formatDate}}</span>
                            </div>
                            <div class="dy-flex" style="flex-direction: column;">
                                <div>
                                    <p class="table-gray-title mt-10">{{single.expenseName}}</p>
                                </div>
                                <span>应收金额：{{single.amount.amountReceive || '--'}}元</span>
                                <span>已收金额：{{single.amount.amountPayed || '--'}}元</span>
                                <span>减免金额：{{single.amount.derateExpense || '--'}}元</span>
                                <span>结转金额：{{single.amount.carryOverAmount || '--'}}元</span>
                            </div>
                        </section>
                        <section v-if="!item.expenses[0].amount" class="invalidCalss">作废</section>
                    </li>
                    <li class="dy-fx-3 rentClass" v-if="item.expenses.length>0">
                        <section v-for="(single,one) in item.expenses" v-if="single.withdrawAmount">
                            <div v-if="!one">
                                <div>
                                    <p class="table-gray-title">账单周期</p>
                                </div>
                                <span
                                    class="color-orange">{{item.withdrawBeginDate | formatDate}}至{{item.withdrawEndDate | formatDate}}</span>
                            </div>
                            <div v-if="single.withdrawAmount" class="dy-flex" style="flex-direction: column;">
                                <div>
                                    <p class="table-gray-title mt-10">{{single.expenseName}}</p>
                                </div>
                                <span>应收金额：{{single.withdrawAmount.amountReceive || '--'}}元</span>
                                <span>已收金额：{{single.withdrawAmount.amountPayed || '--'}}元<span
                                        style="color:#ec4151"
                                        v-if="needRefund > 0">（应退：{{needRefund}}元）</span></span>
                                <span>减免金额：{{single.withdrawAmount.derateExpense || '--'}}元</span>
                                <span>结转金额：{{single.withdrawAmount.carryOverAmount || '--'}}元</span>
                            </div>
                        </section>
                        <section v-if="!item.expenses[0].withdrawAmount" class="invalidCalss">作废</section>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  </div>
  <div style="text-align: center;" v-if="!allFlag">本次退租无账单需要确认</div>
  <!--应收费用-->
  <section class="ptb-10" v-if="allFlag">
    <div class="title-withdraw bg-f7f7f7 mb-10"
        style="margin-left:-24px; margin-right:-24px; padding-left:24px;">
        <h3 class="he-title inline pr-12">应收部分</h3>
        <span class="color-primary" v-if="timeDate">截止退租时间共有
            <a href="#/billList?ddtab=true" target="_blank" @click="pageName(contratdata.zlfCompany)"
                class="color-orange mlr-3">{{wfMoney}}个账单</a>未付清
        </span>
    </div>
    <div class="he-receivable-container">
        <!--应收部分费项-->
        <!--自动累加费用-->
        <div class="mb-10" v-for="(item,index) in receiveData">
            <div class="row">
                <div class="col-xs-2 line-height-34">{{item.expense_name}}：</div>
                <div class="col-xs-3 row">
                    <div class="col-xs-11">
                        <input type="text" class="form-control" placeholder="金额" v-model="item.amount"
                            @blur="ValDataNumber(index, item.amount)" :disabled="item.disabled">
                    </div>
                    <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
                </div>
                <div class="col-xs-4">
                    <input placeholder="备注(选填)" type="text" class="form-control" v-model="item.memo" :disabled="item.disabled">
                </div>
                <div class="col-xs-1 pl-0">
                    <span class="icon-Gm-delete font-18 line-height-34 color-c9c9c9"
                        @click="del(receiveData,index)" v-show="item.isShow"></span>
                </div>
            </div>
        </div>
        <div class="mb-10" v-for="(item,index) in chargeData">
            <div class="row">
                <div class="col-xs-2 line-height-34">
                    <input type="text" class="form-control js-cy-name-ipt" v-model="item.expense_name"
                        autocomplete="off" :value="item.expense_name"
                        @input="matchReceiveExpense(item.expense_name,index)">

                    <ul class="hi-expense-match bg-fff border z-998 line-height-34" v-show="isReceiveMatch">
                        <li v-for="(item,index) in matchData"
                            @click="selectedReceiveExpense(item.expenseName,item.type)">
                            {{item.expenseName}}
                        </li>
                    </ul>
                </div>
                <div class="col-xs-3 row">
                    <div class="col-xs-11">
                        <input type="text" class="form-control" placeholder="金额" v-model="item.amount"
                            @focus="hideMatchReceiveExpense">
                    </div>
                    <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
                </div>
                <div class="col-xs-4">
                    <input placeholder="备注(选填)" type="text" class="form-control" v-model="item.memo">
                </div>
                <div class="col-xs-1 pl-0">
                    <span class="hl-icon icon-Gm-cancel font-18 line-height-34 mr-5 mb-20 cursor"
                        @click="del(chargeData,index)"></span>
                    <span class="hl-icon icon-Gm-confirm font-18 line-height-34 cursor"
                        @click="addReceive(index)"></span></div>
            </div>
        </div>
        <!--隐藏添加项目-->
        <div class="clearfix color-primary line-height-34">
            <div class="pull-left hl-icon icon-Org-account font-18 line-height-34 pr-12 cursor"
                @click="pushReceive('RC')"></div>
            <div class="pull-left cursor" @click="pushReceive('RC')">添加费用</div>
        </div>

        <div class="color-primary line-height-34 ">
            <span class="pr-12">应收合计：</span>
            <span>{{ chargeTotal | formatNum }}</span>元
        </div>
    </div>
  </section>

  <!--应退费用-->
  <section class="border-b pb-10" v-if="allFlag">
    <div class="title-withdraw bg-f7f7f7 mb-10"
        style="margin-left:-24px; margin-right:-24px; padding-left:24px;">
        <h3 class="he-title inline pr-12">应退部分</h3>
        <span class="color-primary" v-if="timeDate">截止退租时间共有
            <a href="#/billList?ddtab=true" target="_blank" @click="pageName(contratdata.zlfCompany)"
                class="color-orange mlr-3">{{yfMoney}}个账单</a>已付应退
        </span>
    </div>
    <div class="he-recoverable-container">
        <!--应退部分费项-->
        <div class="mb-10" v-for="(item,index) in refundData">
            <div class="row">
                <div class="col-xs-2 line-height-34">{{item.expense_name}}:</div>
                <div class="col-xs-3 row">
                    <div class="col-xs-11">
                        <input type="text" class="form-control" placeholder="金额" v-model="item.amount"
                            @blur="ValDataNumber(index, item.amount)" :disabled="item.disabled">
                    </div>
                    <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
                </div>
                <div class="col-xs-4">
                    <input placeholder="备注(选填)" type="text" class="form-control" v-model="item.memo" :disabled="item.disabled">
                </div>
                <div class="col-xs-1 pl-0">
                    <span class="icon-Gm-delete font-18 line-height-34 color-c9c9c9"
                        @click="del(refundData,index)" v-show="item.isShow"></span>
                </div>
            </div>
        </div>
        <div class="mb-10" v-for="(item,index) in paymentData">
            <div class="row">
                <div class="col-xs-2 line-height-34">
                    <input type="text" class="form-control js-cy-name-ipt refund-name"
                        v-model="item.expense_name" autocomplete="off" :value="item.expense_name"
                        @input="matchRefundExpense(item.expense_name,index)">
                    <ul class="hi-expense-match bg-fff border z-998 line-height-34" v-show="isRefundMatch">
                        <li v-for="(item,index) in matchData"
                            @click="selectedRefundExpense(item.expenseName,item.type)">
                            {{item.expenseName}}
                        </li>
                    </ul>
                </div>
                <div class="col-xs-3 row">
                    <div class="col-xs-11">
                        <input type="text" class="form-control" placeholder="金额" v-model="item.amount"
                            @focus="hideMatchRefundExpense">
                    </div>
                    <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
                </div>
                <div class="col-xs-4">
                    <input placeholder="备注(选填)" type="text" class="form-control" v-model="item.memo"
                        @focus="hideMatchRefundExpense">
                </div>
                <div class="col-xs-1 pl-0">
                    <span class="hl-icon icon-Gm-cancel font-18 line-height-34 mr-5 mb-20 cursor"
                        @click="del(paymentData,index)"></span>
                    <span class="hl-icon icon-Gm-confirm font-18 line-height-34 cursor"
                        @click="addRefund(index)"></span></div>
            </div>
        </div>
        <div class="clearfix color-primary line-height-34">

            <div class="pull-left hl-icon icon-Org-account font-18 line-height-34 pr-12 cursor"
                @click="pushRefund('RF')"></div>
            <div class="pull-left cursor" @click="pushRefund('RF')">添加费用</div>

        </div>
        <div class="color-primary line-height-34">
            <span class="pr-12">应退合计：</span>
            <span>{{ paymentTotal | formatNum }}</span>元
        </div>
    </div>
  </section>

  <!--费用合计-->
  <section class="border-b pb-10" v-if="allFlag">
    <h3 class="he-title">费用合计</h3>
    <div class="color-blue line-height-34">
        <span class="pr-12">费用合计：</span>
        <span>{{ total }}</span>
    </div>
  </section>

  <div style="margin-top: 10px;">
    <hl-button type="primary" @on-click="previous">上一步</hl-button>
    <hl-button type="primary" @on-click="createDetail">生成账单</hl-button>
  </div>

  <!--冲突账单-->
  <div class="mt-15"></div>
  <div class="textCss" v-if="showFlag">冲突账单</div>
  <div class="cost-list js-operation text-center line-height-45 br-4 global_table" style="border:1px solid #E5E5E5;" v-if="showFlag">
    <div class="dy-flex color-666 font-nm color-gray border-b global_table_title" style="margin:0">
      <div class="dy-fx-1 plr-2 ellipsis-1">账单开始日期</div>
      <div class="dy-fx-1 plr-2 ellipsis-1">账单结束日期</div>
      <div class="dy-fx-1 plr-2 ellipsis-1">收款日</div>
      <div class="dy-fx-1 plr-2 ellipsis-1" v-for="item in totalArr">{{item.expense_name}}</div>
      <div class="dy-fx-1 plr-2 ellipsis-1">合计</div>
    </div>
    <div class="cost-content js-edit css-overflow">
      <div class="dy-flex cost-list-item global_table_item">
        <div class="dy-fx-1 plr-2 ellipsis-1">{{getContractIndex.effective_date}}</div>
        <div class="dy-fx-1 plr-2 ellipsis-1">{{getContractIndex.effective_date}}</div>
        <div class="dy-fx-1 plr-2 ellipsis-1">{{getContractIndex.effective_date}}</div>
        <div class="dy-fx-1 plr-2 ellipsis-1" v-for="item in totalArr">{{item.amount}}</div>
        <div class="dy-fx-1 plr-2 ellipsis-1">{{totalD}}</div>
      </div>
    </div>
  </div>
  <div v-if="showFlag" style="margin-top: 10px;">
    <hl-button type="primary" @on-click="save">保存</hl-button>
    <hl-button type="outline" @on-click="submit">提交审批</hl-button>
  </div>
  <web-costitem :show="flag" @query="queryExpenditure" :flowtype="flowtype" permissions="true"></web-costitem>
</main>
<script src="modules/bill/scripts/costItem.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_public.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/contratchange/scripts/conflict.js" charset="utf-8"></script>
